<template>
  <div style="width: 100%;height: 100%;background-color: #f1f4fc;text-align: center;color: #181818">
    <!-- banner box start -->
    <div style="height: 500px">
      <!-- sign start -->
      <div style="width: 40%;height: 100%;float: left;">
        <div style="margin-top: 180px"><span>医疗</span><span style="color: #0075ff">速递</span></div>
        <div style="margin-left: 220px"><span>关爱无间</span></div>
        <div class="slogan"><span>医疗是人类的守护者</span><span style="margin-left: 30px">科技是生命健康的后盾</span></div>
        <button class="go_btn" @click="toSign">立即体验</button>
      </div>
      <!-- sign end -->

      <!-- banner start -->
      <div  style="width: 650px;float: left;margin-left: 130px;margin-top: 70px">
        <el-carousel :interval="4000" type="card" height="400px">
          <el-carousel-item v-for="(item, index) in banner" :key="index">
            <img :src="item.imgUrl" style="width: 100%;height: 100%;border-radius: 7px"/>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- banner end -->
    </div>

    <!-- footer box start -->
    <div style="width: 100%;height: 600px;background-color: #f1f4fc;margin-top: 50px">
      <div style="position: absolute;left: 43%;top: 86%;"><span class="footer-title">一站式定制</span></div>
      <div class="footer_img">
        <img src="http://localhost:9000/static/indexFooter.png" style="height: 100%;width: 100%"/>
      </div>
    </div>
    <!-- footer box start -->

  </div>
</template>

<script>
import {onMounted, ref} from "vue";
import tokenTools from "@/assets/tools/tokenTools";
import router from "@/router";

export default {
  name: "index",
  setup(){
    const banner = [
      {
        title: 'Card 4',
        description: 'Description for Card 1',
        imgUrl: 'http://localhost:9000/static/CT01.png'
      },
      {
        title: 'Card 2',
        description: 'Description for Card 2',
        imgUrl: 'http://localhost:9000/static/CT02.png'
      },
      {
        title: 'Card 3',
        description: 'Description for Card 3',
        imgUrl: 'http://localhost:9000/static/CT03.png'
      }
    ]
    const activeIndex = ref("1")
    const handleSelect = (key, keyPath) => {
      console.log(key,keyPath)
    }

    // 加载函数
    onMounted(()=>{
      document.title = '觅长生(*°ω°*)ﾉ';
    });

    function toSign(){
      // localStorage.removeItem("token")
      // console.log(localStorage.getItem('token'))
        router.push({ name: "SignIn"})
    }
    return{
      banner,
      activeIndex,
      handleSelect,
      toSign
    }
  }
}
</script>

<style scoped>
.main{
  width:100% !important;
}
.el-card__body{
  padding: 0 !important;
}
span{
  font-size: 4rem;
  font-weight: bolder;
  font-family: 楷体;
  letter-spacing: 0.1em;
}
.slogan{
  margin-top: 10px;
}
.slogan span{
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.1em;
  margin-left: 80px;
}
.go_btn{
  height: 50px;
  width: 170px;
  margin-top: 55px;
  font-size: 1.2em;
  margin-left: 65px;
  background-color: #3f8cff;
  color: white;
  border-radius: 13px;
  border: none;
}
.footer-title{
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: -0.1em;
  margin-left: 0px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;

}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.flex-grow {
  flex-grow: 1;
  background-color: #f1f4fc;
}
.footer_img{
  width: 75%;
  height: 537px;
  margin: auto;
  box-shadow: 11px 0 18px 1px #c1c1c1;
}
</style>